<template>
  <div class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      background
      @current-change="handleCurrentChange"
      :current-page="pageParams.Index"
      :page-sizes="pageSizes"
      :page-size="pageParams.Size"
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import Config from "@/config/app.js";
export default {
  name: "Pagination",
  props: {
    requestFunc: [Function, Boolean],
    filterParams: {
      type: Function,
      default: p => {
        return p;
      }
    },
    params: Object,
    paginationField: {
      type: String,
      default: ""
    }
  },
  data: () => {
    return {
      total: 100,
      pageSizes: Config.pageSizesArr,
      pageParams: {
        Size: Config.pageSizesArr[0],
        Index: 1
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageParams.Size = val;
      this.getPageData();
    },
    handleCurrentChange(val) {
      this.pageParams.Index = val;
      this.getPageData();
    },
    getPageData() {
      if (!this.requestFunc) {
        this.$emit("returnData", []);
        return;
      }
      let p = this.filterParams({ ...this.params, ...this.pageParams });
      this.requestFunc(p)
        .then(result => {
          let r = result;
          if (this.paginationField) {
            r = result[this.paginationField];
          }
          this.total = parseInt(r.iTotalItemCount);
          this.$emit("returnData", result);
        })
        .catch(() => {});
    },
    Refresh() {
      this.pageParams.Index = 1;
      this.getPageData();
    },
    GetAllParam() {
      return { ...this.params, ...this.pageParams };
    }
  },
  mounted: function() {
    this.getPageData();
  }
};
</script>

<style lang="scss">
.pagination {
  padding: 10px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    border-radius: 50% !important;
    background-color: #303244;
  }
  .el-pagination .el-select .el-input .el-input__inner {
    border-radius: 14px;
    background-color: #303244;
    border: none;
  }
}
</style>
